import React from 'react';

const CameraControlSettings = ({
  cameraSettings,
  setCameraSettings
}) => {
  const handleSettingChange = (setting, value) => {
    setCameraSettings(prev => ({
      ...prev,
      [setting]: value
    }));
  };

  return (
    <div className="camera-control-settings">
      <h3>🎥 Camera Controls</h3>
      
      <div className="camera-settings-grid">
        
        {/* Control Modes */}
        <div className="setting-section">
          <h4>Control Modes</h4>
          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={cameraSettings.enableRotate}
                onChange={(e) => handleSettingChange('enableRotate', e.target.checked)}
              />
              Enable Rotation
            </label>
          </div>
          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={cameraSettings.enablePan}
                onChange={(e) => handleSettingChange('enablePan', e.target.checked)}
              />
              Enable Panning (Right Click)
            </label>
          </div>
          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={cameraSettings.enableZoom}
                onChange={(e) => handleSettingChange('enableZoom', e.target.checked)}
              />
              Enable Zoom (Mouse Wheel)
            </label>
          </div>
          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={cameraSettings.autoRotate}
                onChange={(e) => handleSettingChange('autoRotate', e.target.checked)}
              />
              Auto Rotate
            </label>
          </div>
        </div>

        {/* Sensitivity Settings */}
        <div className="setting-section">
          <h4>Sensitivity</h4>
          <div className="setting-item">
            <label>Rotation Speed: {cameraSettings.rotateSpeed.toFixed(1)}</label>
            <input
              type="range"
              min="0.1"
              max="3"
              step="0.1"
              value={cameraSettings.rotateSpeed}
              onChange={(e) => handleSettingChange('rotateSpeed', parseFloat(e.target.value))}
            />
          </div>
          <div className="setting-item">
            <label>Pan Speed: {cameraSettings.panSpeed.toFixed(1)}</label>
            <input
              type="range"
              min="0.1"
              max="3"
              step="0.1"
              value={cameraSettings.panSpeed}
              onChange={(e) => handleSettingChange('panSpeed', parseFloat(e.target.value))}
            />
          </div>
          <div className="setting-item">
            <label>Zoom Speed: {cameraSettings.zoomSpeed.toFixed(1)}</label>
            <input
              type="range"
              min="0.1"
              max="3"
              step="0.1"
              value={cameraSettings.zoomSpeed}
              onChange={(e) => handleSettingChange('zoomSpeed', parseFloat(e.target.value))}
            />
          </div>
          <div className="setting-item">
            <label>Smoothness: {cameraSettings.smoothness.toFixed(2)}</label>
            <input
              type="range"
              min="0.01"
              max="0.5"
              step="0.01"
              value={cameraSettings.smoothness}
              onChange={(e) => handleSettingChange('smoothness', parseFloat(e.target.value))}
            />
          </div>
        </div>

        {/* Distance Limits */}
        <div className="setting-section">
          <h4>Distance Limits</h4>
          <div className="setting-item">
            <label>Min Distance: {cameraSettings.minDistance}m</label>
            <input
              type="range"
              min="1"
              max="10"
              step="0.5"
              value={cameraSettings.minDistance}
              onChange={(e) => handleSettingChange('minDistance', parseFloat(e.target.value))}
            />
          </div>
          <div className="setting-item">
            <label>Max Distance: {cameraSettings.maxDistance}m</label>
            <input
              type="range"
              min="20"
              max="100"
              step="5"
              value={cameraSettings.maxDistance}
              onChange={(e) => handleSettingChange('maxDistance', parseFloat(e.target.value))}
            />
          </div>
          {cameraSettings.autoRotate && (
            <div className="setting-item">
              <label>Auto Rotate Speed: {cameraSettings.autoRotateSpeed.toFixed(1)}</label>
              <input
                type="range"
                min="0.1"
                max="2"
                step="0.1"
                value={cameraSettings.autoRotateSpeed}
                onChange={(e) => handleSettingChange('autoRotateSpeed', parseFloat(e.target.value))}
              />
            </div>
          )}
        </div>

        {/* Camera Presets */}
        <div className="setting-section">
          <h4>Camera Presets</h4>
          <div className="preset-buttons">
            <button
              className="preset-btn"
              onClick={() => {
                setCameraSettings(prev => ({
                  ...prev,
                  target: [0, 2, 0],
                  rotateSpeed: 1,
                  panSpeed: 1,
                  smoothness: 0.1
                }));
              }}
            >
              🎯 Follow Drone
            </button>
            <button
              className="preset-btn"
              onClick={() => {
                setCameraSettings(prev => ({
                  ...prev,
                  target: [0, 0, 0],
                  rotateSpeed: 0.5,
                  panSpeed: 0.5,
                  smoothness: 0.05
                }));
              }}
            >
              🏞️ Overview
            </button>
            <button
              className="preset-btn"
              onClick={() => {
                setCameraSettings(prev => ({
                  ...prev,
                  autoRotate: true,
                  autoRotateSpeed: 0.5,
                  rotateSpeed: 1.5,
                  smoothness: 0.15
                }));
              }}
            >
              🔄 Cinematic
            </button>
            <button
              className="preset-btn"
              onClick={() => {
                setCameraSettings(prev => ({
                  ...prev,
                  rotateSpeed: 2,
                  panSpeed: 2,
                  zoomSpeed: 2,
                  smoothness: 0.2
                }));
              }}
            >
              ⚡ Responsive
            </button>
          </div>
        </div>

        {/* Control Instructions */}
        <div className="setting-section instructions-section">
          <h4>📖 Controls Guide</h4>
          <div className="instructions">
            <div className="instruction-item">
              <span className="instruction-icon">🖱️</span>
              <span><strong>Mouse Movement:</strong> Free camera rotation</span>
            </div>
            <div className="instruction-item">
              <span className="instruction-icon">🖱️</span>
              <span><strong>Left Click + Drag:</strong> Precise camera rotation</span>
            </div>
            <div className="instruction-item">
              <span className="instruction-icon">🖱️</span>
              <span><strong>Right Click + Drag:</strong> Pan camera position</span>
            </div>
            <div className="instruction-item">
              <span className="instruction-icon">🎡</span>
              <span><strong>Mouse Wheel:</strong> Zoom in/out</span>
            </div>
            <div className="instruction-item">
              <span className="instruction-icon">🔄</span>
              <span><strong>Auto Rotate:</strong> Automatic cinematic rotation</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CameraControlSettings;
